<template>
  <div class="app-container">
    <tree-table
      :categoryType="categorytype"
      :data="categoryList"
      :columns="treeTableColumns"
      @editCategory="editCategory"
      @deleteCategory="deleteCategory"
      @move="moveCategory"
      :isHaveThree="false"
      border
    ></tree-table>
    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
  </div>
</template>

<script>
import list from '@/mixins/List'
import listPagination from '@/components/ListPagination'
import treeTable from '@/components/TreeTable'
import {
  getListCategory,
  addCategory,
  updateCategory,
  delCategory,
  moveCategory
} from '@/api/product'

export default {
  name: 'productBackCategory',
  mixins: [list],
  components: {
    treeTable,
    listPagination
  },
  data () {
    return {
      treeTableColumns: [
        {
          text: '分组名称',
          value: 'name',
          width: 200
        }
      ],
      categorytype: 2,
      categoryList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      let { data } = await getListCategory({
        categorytype: this.categorytype,
        pageNum: this.page,
        pageSize: this.pageSize
      })
      this.categoryList = data.list
      this.total = data.total
    },
    handleCurrentChange (value) {
      this.page = value
      this.getList()
    },
    // 新增/编辑分类
    async editCategory (categoryObj) {
      if (categoryObj.id) {
        await updateCategory(categoryObj)
      } else {
        await addCategory(categoryObj)
      }
      this.getList()
    },
    // 删除分类
    async deleteCategory (id) {
      await delCategory({
        id: id
      })
      this.getList()
    },
    async moveCategory (id, direction) {
      await moveCategory({
        id: id,
        direction: direction
      })
      this.getList()
    }
  }
}
</script>
<style>
</style>
